<template>
  <div class="container">
    <div class="container_top">
      <div>
        <a-image
            width="200"
            :src="dataList?.artist?.cover"
            style="border-radius: 20px;"
        />
      </div>
      <div class="container_center">
        <div class="container_center_top">
          <h2 style="margin:  10px">{{ dataList?.artist?.name }}</h2>
        </div>
        <div class="container_center_stree">
          <a-button type="primary" shape="round" status="danger">
            <template #icon>
              <icon-caret-right/>
            </template>
            个人主页
          </a-button>
          <a-button type="outline" shape="round" style="color: black;border: 1px solid #ddd"
                    class="container_center_stree_button_two">
            <template #icon>
              <icon-heart/>
            </template>
            收藏
          </a-button>
        </div>
        <div>
          <div style="display: flex;margin:  10px 0">
            <div>
              <span>单曲：</span>
              <span>{{ dataList?.artist?.musicSize }}</span>
            </div>
            <div style="margin: 0 10px">
              <span>专辑：</span>
              <span>{{ dataList?.artist?.mvSize }}万</span>
            </div>
            <span>MV数：</span>
            <span>{{ dataList?.videoCount }}</span>
          </div>

        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="专辑" name="first">
          <span class="cradSong">
      <div v-for="item in albumList" :key="item.id">
      <card :src="item.blurPicUrl" :description='item.name'
            @click="$router.push( {path: '/album',query: {id:item.id}})"></card>
      </div>
    </span>
      </el-tab-pane>
      <el-tab-pane label="MV" name="second">MV</el-tab-pane>
      <el-tab-pane label="歌手详情" name="third">歌手详情</el-tab-pane>
    </el-tabs>
    <div style="height: 180px;"></div>
  </div>
</template>


<script setup>
import {ref, onActivated, onDeactivated} from "vue"
import {useRoute} from "vue-router";
import {GetsingerDetailsApi, GetalbumApi} from "~/commonApi/api"
import card from "~/components/card.vue"


const activeName = ref('first')
const route = useRoute()
const dataList = ref([])
const albumList = ref([])
//获取歌手ID
const id = ref('')
id.value = route.query.id
const getdataList = async () => {
  const res = await GetsingerDetailsApi(id.value)
  const resuqlt = await GetalbumApi(id.value)
  albumList.value = resuqlt.hotAlbums
  dataList.value = res.data
}

getdataList()

const handleClick = (tab) => {
  console.log(tab)
}


</script>

<style scoped lang="scss">
.container {
  overflow-y: scroll;
  height: 100vh;
}

.container_top {
  display: flex;
  margin: 1rem;

  .container_center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2rem;

    .container_center_top {
      display: flex;
      align-items: center;
    }

    .container_center_two {
      display: flex;
      align-items: center;
    }

    .container_center_stree_button_two {
      margin: 0 10px;
    }
  }


}

:deep(.el-tabs__nav-wrap)::after {
  content: none;
}

.cradSong {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(5, 16%);
}

</style>